<template>
    <div id="app">
        <el-container>
            <el-header class="home-header" height="50px">
                <HomeHeader/>
              </el-header>
            <el-main style="margin-top: 45px;">
                <div v-if="orderInfo != null">
                    <h1>所有订单</h1>
                    <el-divider style="border-top-width: 2px; border-top-color: #8b8787;" />
                    <div v-for="orderItem in orderInfo" :key="orderItem.id">
                        <el-descriptions class="margin-top" :column="2" size="large" border>
                            <template #extra>
                                <el-button v-if="orderItem.status == 0" type="primary" @click="returnCar(orderItem.id, orderItem.carId)">还车</el-button>
                                <el-button type="primary" @click="toOrderInfo(orderItem.id)">详情</el-button>
                            </template>
                            <template #title>
                                <h2>{{ orderItem.carName }}</h2>
                            </template>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon>
                                            <tickets />
                                        </el-icon>
                                        创建时间
                                    </div>
                                </template>
                                {{ orderItem.createTime }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon>
                                            <tickets />
                                        </el-icon>
                                        总付款
                                    </div>
                                </template>
                                {{ orderItem.total }}元
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">
                                        <el-icon>
                                            <tickets />
                                        </el-icon>
                                        订单状态
                                    </div>
                                </template>
                                <div v-if="orderItem.status == 0">进行中</div>
                                <div v-else-if="orderItem.status == 1">等待检查人员检查</div>
                                <div v-else-if="orderItem.status == 2">订单完成</div>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-divider style="border-top-width: 2px; border-top-color: #8b8787;" />
                    </div>
                </div>
            </el-main>

        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { getAllOrderByUserId, updateOrder, addCheck } from '@/api'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
import HomeHeader from '@/components/HomeHeader.vue';
import router from '@/router';


let orderInfo = reactive([])

const id = ref()

const baseURL = ref('http://localhost:8081/common')

const route = useRoute();

//获取图片
const getImage = (img: any) => {
    return baseURL.value + `/download?name=${img}`
}

// 在组件挂载时初始化数据
onMounted(() => {
    getAllOrderByUserId(route.params.id).then((resp: { data: any; }) => {
        let data = resp.data;
        if (data.code == '50041') {
            Object.assign(orderInfo, data.data);
            console.log(orderInfo)
        } else {
            ElMessage({
                message: data.message,
                type: 'error'
            });
        }
    });
});

let checkInfo = reactive({
  userId: '',
  carId: '',
  orderId: '',
  status: '0',
})

let orderUpdate = reactive({
    id: '',
    checkId: '',
    status: 0,
})

// 生成检查单 更改订单状态
const returnCar = (orderId : any, carId : any) => {
  // 生成检查单 (要返回checkId)
  checkInfo.userId = route.params.id[0]
  checkInfo.orderId = orderId
  checkInfo.carId = carId

  addCheck(checkInfo).then(async (res: { data: any }) => {
    if (res.data.code == 50011) {
      ElMessage.success(res.data.message)
      // 更改订单状态
      orderUpdate.id = orderId
      orderUpdate.checkId = res.data.data
      orderUpdate.status = 1
      updateOrder(orderUpdate).then(async (res: { data: any }) => {
        if (res.data.code == 50031) {
            ElMessage.success(res.data.message)
            setTimeout(() => {
              window.location.reload();
            }, 1000);
        } else {
            ElMessage({
                message: res.data.message,
                type: 'error'
            });
        }
      })
    } else {
      ElMessage({
        message: res.data.message,
        type: 'error'
      });
    }
  })
};
// 跳转到订单详情
const toOrderInfo = (orderId : any) => {
  router.push('/orderInfo/' + orderId)
};

</script>

<style scoped>
.home-header {
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

</style>